<template>
  <div>
  <el-form :model="baseTable" ref="attachment">
    <el-table
        :data="attachmentTableData">
        <el-table-column
            label="附件名称">
            <template slot-scope="scope">
              <span v-if="scope.row.type" style="color: red; margin-right: 10px;">*</span>
              <span v-else style="margin-right: 15px;"></span>
              <i class="el-icon-document-remove"></i>
              <span style="margin-left: 10px">{{ scope.row.attachmentName }}</span>
            </template>
        </el-table-column>
        <el-table-column
            label="文件上传">
            <template slot-scope="scope" >
              <!-- :disabled="!scope.row.status"
                              :hidden="!scope.row.status" -->
              <el-form :model="baseTable" :ref="scope.row.ref">
                <el-form-item v-if="scope.row.type"
                              :prop="scope.row.ref"
                              :rules="{required: true, message: scope.row.attachmentName+'不能为空', trigger: 'blur'}">
                  <attachment :ref="scope.row.ref" v-model="baseTable[scope.row.ref]" :business-id="adjunctId" :limit="1"
                              :uploadSizeLimit="100" :uploader-id="scope.row.uploaderId" module-name="上传"
                              @onFileSuccess="onFileSuccess(scope.row)"
                              @onFileRemove="onFileRemove"
                              
                  />
              </el-form-item>
              <el-form-item v-else>
                  <attachment :ref="scope.row.ref" v-model="baseTable[scope.row.ref]" :business-id="adjunctId" :limit="1"
                              :uploadSizeLimit="100" :uploader-id="scope.row.uploaderId" module-name="上传"
                              @onFileSuccess="onFileSuccess"
                              @onFileRemove="onFileRemove"
                              
                  />
              </el-form-item>
              </el-form>
            </template>
        </el-table-column>
        <el-table-column class-name="col-decoration" label="操作" width="180" v-if="editable">
        <template slot-scope="scope">
            <el-button
            
            icon="el-icon-finished"
            size="mini"
            type="text"
            @click.stop="saveRow(scope.row, scope.$index)"
            >保存
            </el-button>
            <el-button
              
              :class="scope.row.archiveStatus ?'disabled-button':''"
              :disabled="scope.row.archiveStatus"
              icon="el-icon-delete"
              size="mini"
              type="text"
              @click="deleteRow(scope.row, scope.$index)"
            >删除
            </el-button>
        </template>
        </el-table-column>
        </el-table>
    </el-form>
  </div>
</template>

<script>
import {
  addAfterRentFile,
  deleteAfterRentFile,
  listAfterRentFile
} from "@/api/hsrzzl/afterRent/archives";
import Attachment from '@/components/ScAttachment/uploadment'

export default {
  name: 'ArchiveTable',
  components: {
    Attachment
  },
  props: {
    adjunctId: {
      type: Number,
      required: false,
      default: -1
    },
    editable:{
      type: Boolean,
      default: true
    },
    attachmentTableData: {
      required: true,
      type: Array,
      default: () => []
    },
    clientId: {
      type: Number,
      required: false,
      default: -1
    },
    projectId: {
      type: Number,
      required: false,
      default: -1
    },
    contractId: {
      type: Number,
      required: false,
      default: -1
    },
    paymentId: {
      type: Number,
      required: false,
      default: -1
    },
  },
  data() {
    return {
      baseTable:{},
    }
  },
  watch:{
    projectId:{
      handler(val,oldVal){
        console.log(val)
        this.init()
      },
      deep:true,
      immediate:true
    }
  },
  methods: {
    init(){
        let flag = true
        let queryParam = {}
        if(this.clientId !== -1) {
          queryParam.clientId = this.clientId
          flag = false;
        }
        if(this.projectId !== -1) {
          queryParam.projectId = this.projectId
          flag = false;
        }
        if(this.contractId !== -1) {
          queryParam.contractId = this.contractId
          flag = false;
        }
        if(this.paymentId !== -1) {
          queryParam.paymentId = this.paymentId
          flag = false;
        }
        if(!flag) {
        listAfterRentFiles(queryParam).then(res => {
          console.log(res.rows)
        })
      }
    },
    onFileRemove(attachmentId) {
      if (this.baseTable.searchValue) {
        this.baseTable.searchValue = String(this.baseTable.searchValue).replace(',' + attachmentId, '').replace(attachmentId, '');
      }
    },
    onFileSuccess(uploadAttachmentIds) {
      if (this.baseTable.searchValue) {
        this.baseTable.searchValue += (',' + uploadAttachmentIds)
        this.baseTable.attachmentId = uploadAttachmentIds
      } else {
        this.baseTable.searchValue += uploadAttachmentIds
        this.baseTable.attachmentId = uploadAttachmentIds
      }
    },
    //保存
    saveRow(row, index) {
        let flag = true
        if(this.clientId !== -1) {
          this.$set(row, 'clientId', this.clientId)
          this.$set(row, 'businessId', this.clientId)
          flag = false;
        }
        if(this.projectId !== -1) {
          this.$set(row, 'projectId', this.projectId)
          this.$set(row, 'businessId', this.projectId)
          flag = false;
        }
        if(this.contractId !== -1) {
          this.$set(row, 'contractId', this.contractId)
          this.$set(row, 'businessId', this.contractId)
          flag = false;
        }
        if(this.paymentId !== -1) {
          this.$set(row, 'paymentId', this.paymentId)
          this.$set(row, 'businessId', this.paymentId)
          flag = false;
        }
        if(this.$refs[row.ref].validate){
            this.$refs[row.ref].validate(valid => {
              if(valid){
                if(!flag){
                  console.log(row)
                  let selectedRowData = JSON.parse(JSON.stringify(this.baseTable))
                  for (let p in selectedRowData) {
                  row[p] = selectedRowData[p] //将sel里面的value赋值给这一行
                  }
                  addAfterRentFile(row).then((response) => {
                  if(response) {
                      if (response.code === 200) {
                      this.msgSuccess('保存成功')
                      // this.reload()
                      } else {
                      this.msgError(response.msg)
                      }
                  }
                  })
                }
              }
          })
        }else{
          if(!flag){
              console.log(row)
              let selectedRowData = JSON.parse(JSON.stringify(this.baseTable))
              for (let p in selectedRowData) {
              row[p] = selectedRowData[p] //将sel里面的value赋值给这一行
              }
              addAfterRentFile(row).then((response) => {
              if(response) {
                  if (response.code === 200) {
                  this.msgSuccess('保存成功')
                  // this.reload()
                  } else {
                  this.msgError(response.msg)
                  }
              }
              })
            }
        }
        
    },
    //取消编辑
    cancelEdit(row, index) {
      if (row && row.id) {
        this.$refs['attachment'].resetFields()
        // row.status = false
      }else {
        this.$refs['attachment'].resetFields()
        // row.status = false
      }
    },
    // 删除
    deleteRow(row,index){
      console.log(this.attachmentTableData[index])
    }
  }
}
</script>

<style scoped>

</style>
